<template> 
  <div id="helloApp">
    <!-- <div >你是个，麻瓜</div> -->
    <!-- <span v-show="flag">hello</span> -->
    <!-- <span>world</span> -->
    <!-- <div v-pre>{{msg}}</div> -->
    <!-- <div v-cloak>{{msg}}</div> -->
    <button @click="fun($event,'你是个麻瓜')">点击</button>
    <!-- <div v-if="flag">我们班学生很帅</div>
    <div v-else-if="flag2">德玛西亚</div>
    <div v-else>我们班女生美的冒泡</div> -->
    <div v-text="tag"></div>
    <div v-html="tag"></div>
    </div>
</template>
<script>

// if() {

// }else {

// }
// template 模板标签 他并不会渲染在dom结构中
// template 里面的一级标签只能有一个
export default {
  name: "helloApp",
  data() {
    return {
      msg: "你是个麻瓜",
      name: "",
      flag: true,
      flag2: true,
      tag: "<div>你是个麻古</div>"
    }
  },
  methods: {
    fun(e, str) {
      // console.log(e, str)
      // console.log(this)
      this.flag = !this.flag
    }
  },
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div{
  color: red;
}
[v-cloak] {
  display: none;
}
</style>
